<template>
  <!-- 主要内容 -->
  <!-- 搜索和筛选表单 -->
  <el-card class="box-card mb-4" shadow="never">
    <el-form :inline="true" :model="searchForm">
      <el-form-item label="课程名称">
        <el-input
          placeholder="请输入课程名称"
          v-model="searchForm.name"
        ></el-input>
      </el-form-item>
      <el-form-item label="课程分类">
        <el-select placeholder="请选择分类" v-model="searchForm.category">
          <el-option
            v-for="item in categories"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="难度级别">
        <el-select placeholder="请选择难度" v-model="searchForm.difficulty">
          <el-option
            v-for="item in levels"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 课程列表 -->
  <el-row :gutter="20" class="mb-4">
    <el-col :span="24">
      <el-card class="box-card mb-4" shadow="never">
        <h5 class="mb-3">全部课程</h5>
        <el-divider></el-divider>
        <el-row :gutter="20">
          <el-col
            :span="8"
            v-for="course in filteredCourses"
            :key="course.course.id"
          >
            <el-card shadow="hover" class="course-card">
              <el-image
                :src="course.course.coverUrl"
                class="course-card-image"
                alt="课程封面"
              >
                <template #error>
                  <div class="image-slot">
                    <el-icon>
                      <Camera />
                    </el-icon>
                    <p>暂无封面</p>
                  </div>
                </template>
              </el-image>

              <div class="course-card-body">
                <div
                  class="d-flex justify-content-between align-items-center mb-2"
                >
                  <el-tag :type="getCategoryType(course.course.categoryName)"
                    >{{ course.course.categoryName }}
                  </el-tag>
                  <el-rate
                    :model-value="course.course.star"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}分"
                  ></el-rate>
                </div>
                <h5 class="card-title">{{ course.course.title }}</h5>
                <p class="card-text text-muted">
                  {{ course.course.description }}
                </p>
                <div class="d-flex justify-content-between align-items-center">
                  <small class="text-muted">
                    <i class="bi bi-people"></i> {{ course.selectNumber }}人学习
                  </small>
                  <small class="text-muted">
                    <i class="bi bi-clock"></i>
                    {{ course.course.lastingTime }}小时课程
                  </small>
                </div>
              </div>
              <div class="course-card-footer">
                <el-button
                  type="primary"
                  @click="goToCourseDetail(course.course.id)"
                  >查看详情
                </el-button>
              </div>
            </el-card>
          </el-col>
          <el-col v-if="filteredCourses.length === 0" :span="24">
            <el-empty description="没有找到相关课程"></el-empty>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { onMounted, ref, computed, reactive } from "vue";
import { useRouter } from "vue-router";
import { Camera, Search } from "@element-plus/icons-vue";
import { useCourseStore } from "@/stores/course.js";

const courseStore = useCourseStore();

onMounted(() => {
  courseStore.getCourses();
});
const router = useRouter();

const searchForm = reactive({
  name: "",
  category: "all",
  difficulty: "all",
});

const categories = [
  { label: "全部课程", value: "all" },
  { label: "基础护理", value: "basic" },
  { label: "专科护理", value: "specialty" },
  { label: "急救技能", value: "emergency" },
  { label: "护理管理", value: "management" },
];

const levels = [
  { label: "全部级别", value: "all" },
  { label: "入门级", value: "0" },
  { label: "基础级", value: "1" },
  { label: "进阶级", value: "2" },
  { label: "专家级", value: "3" },
];

const onSearch = () => {
  console.log("搜索条件:", searchForm);
};

const onReset = () => {
  searchForm.name = "";
  searchForm.category = "all";
  searchForm.difficulty = "all";
  console.log("重置搜索条件:", searchForm);
};

const filteredCourses = computed(() => {
  return courseStore.courses.filter((course) => {
    const nameMatch =
      !searchForm.name || course.course.title.includes(searchForm.name);
    const categoryMatch =
      searchForm.category === "all" ||
      course.course.categoryName === searchForm.category;
    const difficultyMatch =
      searchForm.difficulty === "all" ||
      course.course.difficulty.toString() === searchForm.difficulty;
    return nameMatch && categoryMatch && difficultyMatch;
  });
});

const getCategoryType = (category) => {
  switch (category) {
    case "基础护理":
      return "primary";
    case "专科护理":
      return "success";
    case "急救技能":
      return "warning";
    case "职业发展":
      return "info";
    case "公共卫生":
      return "danger";
    case "老年护理":
      return "";
    default:
      return "";
  }
};

const goToCourseDetail = (course_id) => {
  router.push(`/student/course-detail/` + course_id);
};
</script>

<style scoped>
.d-flex {
  display: flex;
}

#wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
}

.sidebar-wrapper {
  background-color: #fff;
  border-right: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.sidebar-heading {
  border-bottom: 1px solid #ebeef5;
}

.el-menu {
  border-right: none;
}

.page-content-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.header-wrapper {
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
}

.notification-btn {
  border: none;
  background: transparent;
  padding: 0;
  margin-right: 20px;
}

.notification-btn .el-badge {
  line-height: 1;
}

.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.el-dropdown-link img {
  margin-right: 8px;
}

.el-main {
  padding: 20px;
  background-color: #f8f9fa;
}

.text-right {
  text-align: right;
}

.course-card {
  margin-bottom: 20px;
}

.course-card-image {
  width: 100%;
  height: 480px;
  object-fit: contain;
  object-position: center; /* 居中显示 */
  background-color: #f8f8f8; /* 可选：给空白区域加背景色以区分 */
  display: block; /* 避免底部间隙 */
}

.course-card-body {
  padding: 20px;
}

.course-card-footer {
  padding: 20px;
  border-top: 1px solid #ebeef5;
  text-align: right;
}

.el-tag {
  margin-right: 8px;
}

.text-warning {
  color: #e6a23c;
}

.text-muted {
  color: #909399;
}

.el-select {
  width: 150px;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 14px;
  cursor: pointer;
}

.input-with-select .el-input-group__append {
  background-color: var(--el-fill-color-blank);
}
</style>
